<!--
 * @Author: your name
 * @Date: 2021-05-24 11:15:34
 * @LastEditTime: 2021-05-24 15:08:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \5.24\dan\src\views\Homes\Two.vue
-->
<template>
  <div class="two">
    <div class="h"><h3>订单列表</h3></div>
    <div class="min">
      <div class="m1">
        <p>全部订单<span>(1000)</span></p>
        <p>代付款<span>(1000)</span></p>
        <p>代发货<span>(1000)</span></p>
        <p>已发货<span>(1000)</span></p>
        <p>已完成<span>(1000)</span></p>
        <p>已关闭<span>(1000)</span></p>
      </div>
      <div class="m2"><h4>筛选查询</h4></div>
      <div class="m3">
        <p>输入搜索:<input type="text" placeholder="订单编号/商品货号" /></p>
        <p>收货人:<input type="text" placeholder="收货人姓名/手机号码" /></p>
        <p>提交时间:<input type="date" name="" id="" /></p>
      </div>
      <div class="m4">
        <h4>数据列表</h4>
        <span>
          <p>合并订单</p>
          <p>下载配货单</p>
          <p>打印发货单</p>
          <p>打印快递单</p>
          <p>批量发货</p>
          <p>导出订单</p>
        </span>
        <select name="" id="">
          <option value="0">显示条数</option>
          <option value="1">5条</option>
          <option value="2">10条</option>
        </select>
        <select name="" id="">
          <option value="0">排序方式</option>
          <option value="1">升序</option>
          <option value="2">降序</option>
        </select>
      </div>
      <div class="m5">
        <p><input type="radio" /></p>
        <p>订单编号</p>
        <p>提交时间</p>
        <p>用户账号</p>
        <p>订单金额</p>
        <p>支付方式</p>
        <p>订单来源</p>
        <p>订单状态</p>
        <p>操作</p>
      </div>
      <div class="m6">
        <ul class="uls">
          <li v-for="(item, index) in List" :key="index">
            <input type="radio" @click="BtnDetail" />
            <p>{{ item.id }}</p>
            <p>{{ item.date }}</p>
            <p>{{ item.phone }}</p>
            <p>￥{{ item.price }}.00</p>
            <p>{{ item.way }}</p>
            <p>App订单</p>
            <p>{{ item.state }}</p>
            <p>
              <span>查看订单</span>
              <span>{{ item.operation }}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["List"]),
  },
  methods: {
    ...mapActions(["GetList"]),

    BtnDetail() {
      this.$router.push("/Detail");
    },
  },
  created() {
    this.GetList();
  },
};
</script>

<style>
.two {
  width: 100%;
  height: 100%;
}
.h {
  width: 100%;
  height: 50px;
  background: lightgrey;
  padding: 10px;
}
.h h3 {
  border-left: 6px solid green;
  padding: 0 5px;
}
.min {
  width: 100%;
  height: 50px;
  padding: 0 20px;
}
.m1 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.m1 p {
  border: 1px solid #ccc;
  padding: 3px 8px;
  margin-right: 15px;
}
.m1 p:nth-child(1) {
  background: green;
  color: #fff;
}
.m1 p:nth-child(1) span {
  color: #fff;
}
.m1 p span {
  color: red;
}
.m2 {
  width: 100%;
  height: 50px;
  background: lightgrey;
  padding: 10px;
}
.m3 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m4 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: lightgrey;
}
.m4 span {
  display: flex;
  justify-content: space-between;
  margin-left: 50px;
}
.m4 span p {
  margin: 0 15px;
  border: 3px solid #ccc;
  padding: 3px 8px;
  background: #fff;
}
.m5 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid#ccc;
}
.m6 .uls li {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid gold;
}
</style>